<template>
	<view class="signa">
		<view class="btn">
			<view class="cancel-btn" @click="clear">重写</view>
			<view class="save-btn" @click="save">保存</view>
		</view>
		<canvas id="canvas" disable-scroll="true" :style="{'width':width,'height':height}" canvas-id="cid"
			@touchstart="starts" @touchmove="moves" @touchend="end"></canvas>
		<view class="title fs-30">请使用正楷书写</view>
		<gz-image-rotate ref="gzImageRotate" @success="success"></gz-image-rotate>
	</view>
</template>

<script>
	import gzImageRotate from '@/components/gz-image-rotate/gz-image-rotate.vue'
	import {
		showToast,
		showLoading,
		processData
	} from "@/utils/modal.js"
	export default {
		data() {
			return {
				resultUrl: '',
				dom: null,
				line: [],
				width: '0px',
				height: '0px',
				radius: 0,
				sid: 0,
				tempFilePath: ''
			}
		},
		components: {
			gzImageRotate
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.sid = options.sid;
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.width = res.windowWidth - 100 + 'px';
					this.height = res.windowHeight - 4 + 'px';
				}
			});
			const ctx = uni.createCanvasContext('cid');
			this.dom = ctx;
		},
		methods: {
			end(e) {

			},
			distance(a, b) {
				let x = b.x - a.x;
				let y = b.y - a.y;
				return Math.sqrt(x * x + y * y);
			},
			starts(e) {
				this.line.push({
					points: [{
						time: new Date().getTime(),
						x: e.touches[0].x,
						y: e.touches[0].y,
						dis: 0
					}]
				})
				let currentPoint = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.currentPoint = currentPoint;
				this.drawer(this.line[this.line.length - 1]);
			},
			moves(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.lastPoint = this.currentPoint;
				this.currentPoint = point;
				this.line[this.line.length - 1].points.push({
					time: new Date().getTime(),
					x: e.touches[0].x,
					y: e.touches[0].y,
					dis: this.distance(this.currentPoint, this.lastPoint)
				})
				this.drawer(this.line[this.line.length - 1]);
			},
			drawer(item) {
				let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5,
					x, y;
				var time = 0;
				if (item.points.length > 2) {
					let lines = item.points[item.points.length - 3];
					let line = item.points[item.points.length - 2];
					let end = item.points[item.points.length - 1];
					x = line.x;
					y = line.y;
					x1 = lines.x;
					y1 = lines.y;
					x2 = end.x;
					y2 = end.y;
					// console.log(x, y)
					var dis = 0;
					time = (line.time - lines.time) + (end.time - line.time);
					dis = line.dis + lines.dis + end.dis;
					var dom = uni.createCanvasContext('cid');
					var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax);
					// P0（x1,y1）,P2(x2,y2), P1(cx,cy)起点，终点，控制点
					cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t));
					cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t));
					dom.setLineCap('round');
					dom.beginPath();
					dom.setStrokeStyle('black');
					dom.setLineWidth(5);
					// 起始点
					dom.moveTo(x1, y1);
					dom.quadraticCurveTo(cx, cy, x2, y2);
					dom.stroke();
					dom.draw(true);
				}
			},
			clear() {
				this.line = [];
				this.dom.clearRect(0, 0, 1000, 1000);
				this.dom.draw();
			},
			save() {
				if (this.line.length == 0) return showToast('签名内容不能为空')
				let that = this;
				showLoading('保存中');
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'cid',
						fileType: 'png',
						quality: 0.5,
						success(res) {
							let filePath = processData(res.tempFilePath);
							that.$refs.gzImageRotate.start(filePath, 3);
						}
					})
				}, 1000)
			},
			success: function(e) {
				uni.hideLoading();
				let path = processData(e.tempFilePath);
				console.log('原始路径', path);
				uni.setStorageSync('signPath', path);
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		position: fixed;
	}

	.signa {
		position: relative;
		overflow: hidden;
		background-color: #fbfbfb;
		height: 100vh;
		width: 100vw;

		#canvas {
			background-color: white;
			margin-left: 110rpx;
			// border: 1px solid #d6d6d6;
			margin-top: 0px;
			z-index: 99;
		}

		.content {
			margin-left: 60px;
			height: 100vh;
			background-color: white;
		}

		.title {
			position: absolute;
			top: 0;
			left: var(--window-top);
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg);
			width: calc(100vh - var(--window-top));
			height: 32px;
			line-height: 32px;
			margin-top: calc(50vh - 40px);
			// margin-left: 50vh;
			text-align: center;
			z-index: 9999;
			color: red;
			font-size: 32rpx;
		}

		.btn {
			height: 100vh;
			position: fixed;
			font-size: 32rpx;

			.cancel-btn {
				width: 42vh;
				position: fixed;
				left: 50rpx;
				border: 1rpx solid #a9a1a1;
				transform: rotate(90deg);
				color: #666;
				margin-left: -21vh;
				margin-top: 21vh;
				height: 65rpx;
				line-height: 65rpx;
				border-radius: 3px;
				text-align: center;
				justify-content: center;
			}

			.save-btn {
				position: absolute;
				z-index: 999;
				display: inline-flex;
				margin-top: 67vh;
				margin-left: -21vh;
				transform: rotate(90deg);
				background: #3482eb;
				width: 42vh;
				left: 50rpx;
				border-radius: 3px;
				border: 1rpx solid #3482eb;
				color: #fff;
				height: 65rpx;
				line-height: 65rpx;
				text-align: center;
				justify-content: center;
			}
		}
	}
</style>
